<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 后台管理开发框架</title>
<link href="/favicon.ico" rel="icon">
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="/static/admin/layui/css/layui.css" rel="stylesheet" type="text/css" />
<link href="/static/admin/css/style.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- // 重定位Style -->
<style>
    .layui-card-header.layuiadmin-card-header-auto {
        border-bottom: 0px;
        padding-bottom: 0px;
    }

    .layui-card-body {
        padding: 0px 30px;
        padding-bottom: 5px;
    }

    .layui-card-header h5 {
        font-size: 16px;
    }

    .layui-table-tool-temp {
        padding-right: 0px;
    }

</style>
<div class="layui-col-md4">
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-card-header layuiadmin-card-header-auto" style="padding-bottom: 5px">
                <div class="layui-inline layui-hide" id="toolbar">
                    <!-- // 添加数据页面 -->
                    <button class="layui-btn icon-btn" lay-batch="lay-tree"  lay-url="{:url('/system.database/optimize')}" lay-nodel="false" >
                        <i class="layui-icon layui-icon-add-1"></i>优化
                    </button>
                    <button class="layui-btn icon-btn" lay-batch="lay-tree"  lay-url="{:url('/system.database/repair')}" lay-nodel="false" >
                        <i class="layui-icon layui-icon-senior"></i>修复
                    </button>
                    <button class="layui-btn icon-btn" lay-batch="lay-tree"  lay-url="{:url('/system.database/export')}" lay-nodel="false" >
                        <i class="layui-icon layui-icon-export"></i>备份
                    </button>
                    <button class="layui-btn icon-btn" lay-open="" lay-title="数据库配置" lay-area="500px,340px" lay-url="{:url('/system.database/config')}" >
                        <i class="layui-icon layui-icon-form"></i>数据库配置
                    </button>
                </div>
            </div>
            <div class="layui-card-body">
                <!-- // 创建数据实例 -->
                <table class="layui-table" 
                    lay-data="{
                    url:'{:url('/system.database/index/')}?table=admin', 
                    toolbar: '#toolbar',
                    defaultToolbar: [],
                    id:'lay-tree'}" 
                    lay-filter="lay-tree">
                  <thead>
                    <tr>
                      <th lay-data="{type:'checkbox'}"></th>
                      <th lay-data="{field:'name'}">数据表</th>
                      <th lay-data="{field:'comment'}">数据表说明</th>
                      <th lay-data="{field:'data_length'}">数据大小</th>
                    </tr>
                  </thead>
                </table>
            </div>
        </div>
    </div>
</div>

<div class="layui-col-md8" >
    <!-- // 展示数据 -->
    <div class="layui-fluid">
        <div class="layui-card">
            <!-- // 创建数据实例 -->
            <table id="lay-tableList" lay-filter="lay-tableList"></table>        
        </div>
    </div>
</div>

<script src="/static/admin/layui/layui.js?v=1.0.0"></script>
<script src="/static/admin/js/common.js?v=1.0.0"></script>
<script>
    layui.use(['jquery','table'], function () {

        var jquery = layui.jquery;
        var table = layui.table; 

        // 定义表格URL
        var tableURL = "{:url('/system.database/index')}";
        // 基础表格
        var isTable = table.render({
            elem: "#lay-tableList"
            ,url: tableURL
            ,cols: [[
                {type: 'numbers', title: 'ID'},
                {field: 'field', align: 'center', title: '字段'},
                {field: 'comment', align: 'center', title: '字段注释'},
                {field: 'type', align: 'center', title: '数据类型'},
                {field: 'default', align: 'center', title: '默认值'},
                {field: 'null', align: 'center', title: '非空值'},
                {field: 'collation', align: 'center', title: '排序规则'},
            ]]
        })

        table.on('checkbox(lay-tree)', function(obj){
            var data = obj.data;
            if (jquery.isEmptyObject(data)) {
                return false;
            }
            var url = tableURL + '?table=' + data.name;
            table.reload('lay-tableList', {
                url: url
            });
        });

    });
</script>
